<template>
  <div class="main">
    <!-- <h3>项目管理</h3> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><el-row :gutter="10" class="mb8">
            <el-col v-for="item in statusBtns" :key="item.dictSort" :span="1.5">
              <el-button :type="item.type" plain :icon="item.icon" size="mini" @click="lookSearch(item.dictValue)">{{
                item.dictLabel }}</el-button>
            </el-col>
          
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-folder-opened" size="mini" @click="lookDate">所有</el-button>
            </el-col>
            <!-- <el-button
              style="float: right;"
              type="primary"
              size="mini"
              @click="newProject"
              v-hasPermi="['system:project:add']"
              >创建项目</el-button> -->
          </el-row></span>
      </div>
      <div class="text item">
        <template>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="50" align="center">
            </el-table-column>

            <el-table-column prop="projectCode" label="项目编码" align="center">
            </el-table-column>
            <el-table-column prop="projectName" label="项目名称" align="center">
            </el-table-column>
            <el-table-column prop="projectStatus" label="状态" align="center">
              <template slot-scope="scope">
                <span>
                  <el-tag v-if="scope.row.projectStatus == 'a'">进行中</el-tag>
                  <el-tag type="warning" v-else-if="scope.row.projectStatus == 'b'">运维中</el-tag>
                  <el-tag type="success" v-else-if="scope.row.projectStatus == 'c'">已结束</el-tag>
                  <el-tag type="info" v-else-if="scope.row.projectStatus != 'a' || 'b' || 'c'">未知状态</el-tag>
                </span>
              </template>
            </el-table-column>
           

            <el-table-column prop="projectManagerName" label="项目经理" width="120" align="center">
            </el-table-column>
            <!-- <el-table-column prop="createTime" custom label="项目创建时间" align="center">
            </el-table-column> -->
            <el-table-column prop="startDate" custom label="项目开始时间" align="center">
            </el-table-column>
            <el-table-column prop="endDate" custom label="项目结束时间" align="center">
            </el-table-column>
            <el-table-column prop="joinTime" custom label="加入项目" align="center">
            </el-table-column>
            <el-table-column prop="joinWithProject" joinWithProject label="填报时间" align="center">
              <template slot-scope="scope">
                <span>
                  <el-tag v-if="scope.row.joinWithProject == true">不限</el-tag>
               
                  <el-tag type="info" v-else >从加入时间</el-tag>
                </span>
              </template>
            </el-table-column>

          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </template>
      </div>
    </el-card>
    <!-- <addForm ref="addform"></addForm> -->
  </div>
</template>

<script>
// import {listProject} from "@/api/project"
import {
  listProject,
  delProject,
  getDicttype,
  getProjectStatus,
  updaProjectStatus,
  getMyProjectAllList,
  getMyProjectAllStatus
} from "@/api/system/project";
//import addForm from "./addForm.vue";
// import func from "vue-editor-bridge";
export default {
  // components: {
  //   addForm
  // },
  data() {
    return {
      tableData: [],
      // 查询按钮
      statusBtns: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      }
    };
  },
  created() {
    this.init();
   
  },
  methods: {

    init() {
      getDicttype("mh_project_status").then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.statusBtns = res.data;
          this.statusBtns.forEach(el => {
            if (el.dictSort == 0) {
              el.type = "primary";
              el.icon = "el-icon-folder-add";
            } else if (el.dictSort == 1) {
              el.type = "warning";
              el.icon = "el-icon-truck";
            } else if ((el.dictSort = 2)) {
              el.type = "success";
              el.icon = "el-icon-folder-checked";
            } else {
              el.type = "info";
              el.icon = "el-icon-message-solid";
            }
          });
        }
      });
      //getMyProjectAllList(this.addDateRange(this.queryParams, this.dateRange)).then(
      this.lookDate();
    },

    getProjectOfStatus(){
      getMyProjectAllStatus('a').then(res => {
          // console.log(res);
          if (res.code == 200) {
            // this.$message.success(res.msg);
            this.total = res.data.total;
            this.tableData = res.data.rows;
          } else {
            this.$message.error(res.data.msg);
          }
        }
      );
    },
    
    getList() {
      this.loading = true;
      this.getProjectOfStatus();
    },
    lookSearch(dictValue) {
      // console.log(dictValue);
      getMyProjectAllStatus(dictValue).then(res => {
        // console.log(res);
        if (res.code == 200) {
          // this.$message.success(res.msg);
          this.total = res.data.total;
          this.tableData = res.data.rows;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    lookDate() {
      getMyProjectAllList(this.addDateRange(this.queryParams, this.dateRange)).then(
        res => {
          // console.log(res);
          if (res.code == 200) {
            // this.$message.success(res.msg);
            this.total = res.data.total;
            this.tableData = res.data.rows;
          } else {
            this.$message.error(res.data.msg);
          }
        }
      );
    },
    

    

   
    
  }
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
